
    function Banner(ops={}){
        this.imgs = [
            {
                src:"https://img.doooor.com/img/forum/202112/06/210814ygwiddyu1z4y1zub.jpg.thumb.jpg"      
            },
            {
                src:"https://img.doooor.com/img/forum/202108/15/114536etpapfvyqvtneira.jpg.thumb.jpg"           
            },
            {
                src:"https://img.doooor.com/img/forum/202108/15/114537x4hhkw2w4443wdwd.jpg.thumb.jpg"
            },
            {               
                src:"https://img.doooor.com/img/forum/202003/07/210748aec6x0f0oiygfffo.jpg.thumb.jpg"
            },
            {          
                src:"https://img.doooor.com/img/forum/201906/04/114638g4wrc2egkkcf2swk.jpg.thumb.jpg"            
            },
            {
                src:"https://img.doooor.com/img/forum/202112/06/211649duh447bmm42tmhth.jpg.thumb.jpg"
            },
            {
                src:"https://img.doooor.com/img/forum/202209/21/223920xrzxjyrir2nxrrj4.jpg.thumb.jpg"
            },
            {
                src:"https://img.doooor.com/img/forum/202112/06/210818a2gucpcgghk2121c.jpg.thumb.jpg"
            },
            {
                src:"https://img.doooor.com/img/forum/202112/04/211621zpfc4foc9686k88p.jpg.thumb.jpg"
            },
            {
                src:"https://img.doooor.com/img/forum/202007/15/214232f5gy22puu4oidn9i.jpg.thumb.jpg"
            },
            {
                src:"https://img.doooor.com/img/forum/202204/25/220215gh04qypqppmmz46s.jpg.thumb.jpg"
            }
        ]
        this.box = ops.box;
        this.btns = ops.btns===undefined ? true : ops.btns;
        this.list = ops.list===undefined ? true : ops.list;
        this.autoPlay = ops.autoPlay===undefined ? true : ops.autoPlay;
        this.index = ops.index || 0;
        this.delayTime = ops.delayTime || 3000;
        this.prev = null;

        this.createImgbox();

        if(this.btns){
            this.createBtns();
            this.addBtnsEvent();
        }
        
        if(this.list){
            this.createList();
            this.addListEvent();
        }

        if(this.autoPlay){
            this.play();
        }
    }

    Banner.prototype.createList = function(){
        this.listBox = createEle("list", this.box);
        str = "";
        this.imgs.forEach((val,idx)=>{
            str += `<span></span>`
        })
        this.listBox.innerHTML = str;
        this.listBox.children[this.index].className = "active";
    }

    Banner.prototype.createBtns = function(){
        this.btnsBox = createEle("btns", this.box);
        this.left = createEle("left", this.btnsBox);
        this.right = createEle("right", this.btnsBox);
        this.left.innerHTML = "&lt;";
        this.right.innerHTML = "&gt;";
    }

    Banner.prototype.createImgbox = function(){
        this.imgbox = createEle("imgbox", this.box);
        let str = "";
        this.imgs.forEach(val=>{
            // str += `<a href="${val.href}"><img src="${val.src}" alt="${val.alt}" title="${val.title}"></a>`;
            str += `<a href="http://localhost:3000/list.html"><img src="${val.src}"</a>`;
        })
        this.imgbox.innerHTML = str;
        this.imgbox.children[this.index].style.left = "0";
    }

    Banner.prototype.addBtnsEvent = function(){
        const that = this;
        this.left.onclick = function(){
            that.changeIndex(1);
        }
        this.right.onclick = function(){
            that.changeIndex(2);
        }
    }

    Banner.prototype.changeIndex = function(d){
        if(d === 1){
            if(this.index === 0){
                this.index = this.imgs.length-1;
                this.prev = 0;
            }else{
                this.index--;
                this.prev = this.index+1;
            }
            this.move(this.prev, this.index, 1);
        }else{
            if(this.index === this.imgs.length-1){
                this.index = 0;
                this.prev = this.imgs.length-1
            }else{
                this.index++;
                this.prev = this.index-1;
            }
            this.move(this.prev, this.index, -1);
        }
    }

    Banner.prototype.move = function(prev, now, d){
        const imgs = this.imgbox.children;
        imgs[prev].style.left = 0;
        move(imgs[prev], {
            left: imgs[0].offsetWidth * d
        });
        imgs[now].style.left = -imgs[0].offsetWidth * d + "px";
        move(imgs[now],{
            left: 0
        });
        if(this.list){
            this.listBox.children[prev].className = "";
            this.listBox.children[now].className = "active";
        }
    }

    Banner.prototype.addListEvent = function(){
        const items = this.listBox.children;
        const that = this;
        for(let i=0;i<items.length;i++){
            items[i].index = i;
            items[i].onclick = function(){
                if(this.index > that.index){
                    that.move(that.index, this.index, -1);
                }
                if(this.index < that.index){
                    that.move(that.index, this.index, 1);
                }
                that.index = this.index;
            }
        }
    }

    Banner.prototype.play = function(){
        const that = this;
        let t = setInterval(() => {
            this.changeIndex(2);
        }, this.delayTime);
        this.box.onmouseenter = function(){
            clearInterval(t);
        }
        this.box.onmouseleave = function(){
            t = setInterval(() => {
                that.changeIndex(2);
            }, that.delayTime);
        }
    }

    function createEle(className, parent){
        
        const ele = document.createElement("div")
        ele.className = className;
        parent.appendChild(ele);
        return ele;
    }
    

